<template>
	<div class="app-container">
		<el-form :model="form" :rules="rules" ref="queryRef" :inline="true" label-width="112">
			<div class="bgWhite radius8 pb30">
				<div class=" fb fs16 border-bottom pl30 line-64">
					作物详情
				</div>
				<div class="p20">
					<div class="fb mb20 pl10">
						基础信息
					</div>
					<el-form-item label="作物名称:" prop="cropName">
						<div style="width: 248px">{{form.cropName}}</div>
					</el-form-item>
					<el-form-item label="作物编码:" prop="cropCode">
						<div style="width: 248px">{{form.cropCode}}</div>
					</el-form-item>
					<el-form-item label="作物类别:" prop="cropCategory">
						<dict-tag :options="bus_crop_category" :value="form.cropCategory" style="width: 248px" />
					</el-form-item>
					<el-form-item label="常见靶标:" prop="commonTarget">
						<dict-tag :options="bus_common_target" :value="form.commonTarget" style="width: 248px" />
					</el-form-item>
					<el-form-item label="常见发生月份:" prop="commonOccurMonth1">
						<div style="width: 248px">{{form.commonOccurMonthName}}</div>
					</el-form-item>
					<el-form-item label="常见区域:" prop="commonRegionName1">
						<div style="width: 248px">{{form.commonRegionName}}</div>
					</el-form-item>
				</div>
				<div class="text-center" style="margin-top: 300px;">

				</div>
			</div>
		</el-form>

	</div>
</template>
<script setup name="addCustomer">
	const {
		proxy
	} = getCurrentInstance();
	const {
		bus_crop_category, //作物类别
		bus_common_target, //常见靶标
	} =
	proxy.useDict(
		"bus_crop_category",
		"bus_common_target",
	);
</script>
<script>
	import {
		getCrop, //详情
	} from "@/api/business/product";
	import {
		getDivisions
	} from "@/api/business/opportunity"; //地址
	export default {
		data() {
			return {
				form: {
					id: '',
					cropName: '', //作物名称
					cropCode: '', //作物编码
					cropCategory: '', //作物类别
					commonTarget: '', //常见靶标
					commonOccurMonth: '', //常见发生月份
					commonRegion: [], //常见发生区域
					commonOccurMonth1: '', //常见发生月份
					commonRegion1: [], //常见发生区域
				},
				rules: {
					cropName: [{
						required: true,
						message: '请输入作物名称',
						trigger: 'blur'
					}],
					commonTarget: [{
						required: true,
						message: '请选择常见靶标',
						trigger: 'change'
					}],
					commonOccurMonth1: [{
						required: true,
						message: '请选择常见发生月份',
						trigger: 'change'
					}],
					commonRegion1: [{
						required: true,
						message: '请选择常见发生区域',
						trigger: 'change'
					}],
				},
				address: [],
				bus_common_month: this.useDict('bus_common_month').bus_common_month
			}
		},
		created() {
			this.form.id = this.$route.query.id ? this.$route.query.id : ''
			this.getAddress()
		},
		methods: {
			// 查询地址
			getAddress() {
				let query = {
					type: 'provinces',
					pageNum: 1,
					pageSize: 5000
				}
				//查询接口
				getDivisions(query, query.type).then(res => {
					if (res.code == 200) {
						this.address = res.rows
						//获取详情
						this.getCrop()
					}
				})
			},
			// 详情
			getCrop() {
				getCrop(this.form.id).then(res => {
					this.form = res.data
					this.form.commonRegion = this.form.commonRegion ? this.form.commonRegion.split(',') : []
					this.form.commonRegionName = []
					this.form.commonOccurMonth = this.form.commonOccurMonth ? this.form.commonOccurMonth.split(
						',') : [],
						this.form.commonOccurMonthName = []
					for (let key in this.address) {
						for (let i in this.form.commonRegion) {
							if (this.address[key].code == this.form.commonRegion[i]) {
								this.form.commonRegionName.push(this.address[key].name)
							}
						}
					}
					this.form.commonRegionName = this.form.commonRegionName.join('、')
					for (let i in this.bus_common_month) {
						for (let key in this.form.commonOccurMonth) {
							if (this.bus_common_month[i].value == this.form.commonOccurMonth[key]) {
								this.form.commonOccurMonthName.push(this.bus_common_month[i].label + '月')
							}
						}
					}
					this.form.commonOccurMonthName = this.form.commonOccurMonthName.join('、')
				})
			},
		}
	}
</script>

<style>
	.el-form-item--default .el-form-item__label{
		color: #677585;
	}
</style>